<template>
	<div style="z-index: 1;">
		<div @mousemove="testMove" @mouseleave="testMend" @scroll="testMove">
			<div ref="roll" style="height: 110px;overflow: hidden;">
				<div class="item" v-for="item in list" :key="item.id">
					<span class="phone">{{filterPhone(item.title)}}</span><span>{{item.content}}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	// import {
	// 	onLoad
	// } from '@dcloudio/uni-app';
	import {
		ref,
		reactive,
		onBeforeUnmount,
		onUnmounted,
		onMounted,
		nextTick
	} from 'vue'
	const props = defineProps(['listData'])
	//定时器初始化
	let timer = ref<any>(null)
	//ref绑定初始化
	let roll = ref(null)
	//列表数据初始化
	const list = props.listData
	// 过滤手机号
	const filterPhone = (value : string) => {
		const start = value.slice(0, 3)
		return `${start}***`
	}

	//等同于vue2中的beforeDestroy
	onBeforeUnmount(() => {
		//清除定时器
		clearTimeout(timer.value)
	})
	//等同于vue2中的destroyed
	onUnmounted(() => {
		//清除定时器
		clearTimeout(timer.value)
	})

	/**
	 * @Description: 鼠标移动事件
	 * @Author: admin
	 */
	function testMove() {
		clearTimeout(timer.value)
	}
	/**
	 * @Description: 鼠标离开事件
	 * @Author: admin
	 */
	function testMend() {
		start()
	}
	//开启定时器方法
	function start() {
		//清除定时器
		clearTimeout(timer.value)
		//定时器触发周期
		let speed = ref(65)
		timer.value = setInterval(MarqueeTest, speed.value)
	}

	function MarqueeTest() {
		let test1 : any = roll.value
		// console.log(test1)
		//判断组件是否渲染完成
		if (test1.offsetHeight == 0) {
			test1 = roll.value
		} else {
			//如果列表数量过少不进行滚动
			if (test1.childNodes.length < 6) {
				clearTimeout(timer.value)
				return;
			}
			//组件进行滚动
			test1.scrollTop += 1
			//判断滚动条是否滚动到底部
			if (test1.scrollTop == (test1.scrollHeight - test1.clientHeight)) {
				//获取组件第一个节点
				let a = test1.childNodes[0]
				//删除节点
				test1.removeChild(a)
				//将该节点拼接到组件最后
				test1.append(a)
			}
		}
	}
	//vue2中在created中调用
	//vue3中 setup 包含beforeCreate和created
	//启动定时器
	// onMounted(() => {
	start()
	// })

	// onLoad(() => {
	// 	start()
	// })

	//注
	//示例中 listData 写的静态数据 可以直接调用start()
	//如果是接口获取 listData 列表时 需在 nextTick 中调用 start()；否则，
	//进入页面不会滚动 必须鼠标移入移出才会滚动
	//用nextTick 的原因是 需要等dom元素加载完毕后 再执行方法

	// nextTick(() => {
	// 	start()
	// })
</script>

<style lang="scss" scoped>
	.item {
		width: 100%;
		height: 60px;
		font-size: 30px;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
		background-color: rgba(255, 255, 255, 0.1);
		line-height: 60px;
		margin-top: 10px;

		.phone {
			color: #21F5EA;
			margin: 0 10px;
		}
	}
</style>